<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="16" style="margin: 0 auto">
                <el-row :gutter="20" class="mgb20" >
                    <el-col :span="8">
                    <el-card shadow="hover" :body-style="{ padding: '0px' }">
                        <div class="grid-content grid-con-2">
                            <i class="el-icon-message-solid grid-con-icon"></i>
                            <div class="grid-cont-right">
                                <div class="grid-num">{{total}}</div>
                                <div>今日挂号数</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-user-solid grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{finish}} </div>
                                    <div>今日就诊数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-s-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{profit}}</div>
                                    <div>医院收入</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="10   " style="margin: 0 auto">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="10" style="margin: 0 auto">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Schart from "vue-schart";
    import axios from 'axios'
    import {ref, reactive} from 'vue'
    export default {
        name: "dashboard",
        components: { Schart },
        data(){
          return{
              total:0,
              finish:0,
              profit:0,
              date:'',
              options :{
                  type: "bar",
                  xRorate: 25,
                  title: {
                      text: "今日台账",
                  },
                  labels: [""],
                  datasets: [
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },

                  ],
              },
              options2 :{
                  type: "bar",
                  title: {
                      text: "全部台账",
                  },
                  labels: [""],
                  xRorate: 25,
                  datasets: [
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },
                      {
                          label: "",
                          data: [0],
                      },

                  ],
              },

          }
        },
        activated() {
            this.formatDate();
            this.create();
        },

        created() {
            this.formatDate();
            this.create();
        },
        methods:{
            create(){

                axios.get("http://119.29.60.153:8001/doctorservice/registration/getNumbers?dateString="+this.date).then(resp=> {
                    console.log(resp)
                    this.options.datasets[0].label='挂号收入';
                    this.options.datasets[0].data=[resp.data.data.today[0]];
                    this.options.datasets[1].label='药品支出';
                    this.options.datasets[1].data=[resp.data.data.today[1]];
                    this.options.datasets[2].label='药品收入';
                    this.options.datasets[2].data=[resp.data.data.today[2]];
                    this.options.datasets[3].label='药品收益';
                    this.options.datasets[3].data=[resp.data.data.today[2]-resp.data.data.today[1]];
                    this.options2.datasets[0].label='挂号收入';
                    this.options2.datasets[0].data=[resp.data.data.all[0]];
                    this.options2.datasets[1].label='药品支出';
                    this.options2.datasets[1].data=[resp.data.data.all[1]];
                    this.options2.datasets[2].label='药品收入';
                    this.options2.datasets[2].data=[resp.data.data.all[2]];
                    this.options2.datasets[3].label='药品收益';
                    this.options2.datasets[3].data=[resp.data.data.all[3]];
                    this.total=resp.data.data.total;
                    this.finish=resp.data.data.finish;
                    this.profit=resp.data.data.all[3]+resp.data.data.all[0];
                })
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                this.date=`${year}-${month}-${day}`;
            }
        }
    };
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .schart {
        width: 100%;
        height: 300px;
    }
</style>
